<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <circle id="c1" cx="60" cy="10" r="10">
         
            <animate id="a1"
                attributeName="cx"
                dur="2.500"
                repeatCount="2"
                values="60 ; 110 ; 60 ; 10 ; 60"
                keyTimes="0;0.25;0.5;0.75;1"
                calcMode="discrete"/>
          <animate
            attributeName="cy"
            dur="2.500"
            repeatCount="2"
            values="10 ; 60 ; 110 ; 60 ; 10"
            keyTimes="0;0.25;0.5;0.75;1"
            calcMode="discrete" />
        </circle>

      </svg>

      <script>
        
      </script>
</body>
</html>